<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>role</title>
<link href="img/favicon.ico" rel="shortcut icon" />
<link href="plugins/select2/select2.min.css" rel="stylesheet"
	type="textcss" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/ionicons.min.css" />
<link rel="stylesheet"
	href="plugins/datatables/dataTables.bootstrap.css" />
<link rel="stylesheet" href="css/AdminLTE.min.css" />
<link rel="stylesheet" href="css/skins/_all-skins.min.css" />
<link href="plugins/jstree/dist/themes/default/style.min.css"
	rel="stylesheet" type="textcss" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
<style type="text/css">
.search-label {
	padding: 7px 0 0 !important;
}

.input-sm {
	height: 25px !important;
	margin-top: 5px;
	padding: 3px 10px !important;
}

.btn-sm {
	height: 25px;
	margin-top: 5px;
	padding: 3px 10px;
}

table.dataTable thead>tr>th {
	padding: 5px;
}

table.dataTable tbody>tr>td {
	padding: 5px;
}

.btn-primary {
	background-color: #2188d5;
}

.submit {
	margin-right: 41px;
}
.nav-tabs-custom>.nav-tabs>li.active{
    border-bottom: 2px solid #069c97;
    border-top-color: transparent;
}
.nav-tabs-custom>.nav-tabs>li.active>a{
    border-right-color: transparent;
    border-left-color: transparent;
}
.select-width-70{
    width: 70px;
}
.nav-tabs-custom{
    box-shadow: none;
}
.nav-tabs-custom>.nav-tabs{
    border-bottom-color: #bfbfbf;
}
.box{
    border-radius: 0;
    box-shadow: none;
}
.required-spot{
    color: red;
    position: absolute;
    font-size: 10px;
    top: 5px;
    font-weight: 600;
}
.marginl-107{
    margin-left: 107px;
}
.marginl-207{
    margin-left: 207px;
}
</style>
</head>

<body>
	<div class="wrapper">
		<!-- Content Wrapper. Contains page content -->
		<div class="container-fluid">
			<!-- Content Header (Page header) -->
			<section class="content-header">
                <div class="nav-tabs-custom">
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active">
                            <a href="#roleList" data-toggle="tab"
                               style="font-size: 15px; font-weight: bold; color: #585858;"> 角色列表 </a>
                        </li>
                    </ul>
                </div>
                <div class="tab-content">
                    <div class="tab-pane active" id="roleList">
                        <div class="row">
                            <div class="col-lg-12 col-xs-12">
                                <div class="box box-default" style= "border: none;">
                                    <div class="box-header" style="padding-bottom: 0">
                                        <form class="form-horizontal" style="margin-left: 10px;">
                                            <div class="form-group" style="margin-top: 10px">
                                                <span class="col-sm-1 control-label no-padding search-label">角色ID：</span>
                                                <div class="col-sm-1 no-padding">
                                                    <input type="text" id="q1" class="input-sm form-control"
                                                           placeholder="" />
                                                </div>

                                                <span class="col-sm-1 control-label no-padding search-label">角色名称：</span>
                                                <div class="col-sm-1 no-padding">
                                                    <input type="text" id="q2" class="input-sm form-control"
                                                           placeholder="" />
                                                </div>
	 											<a class="btn btn-sm btn-primary" style="position: absolute;right: 70px;" id="addBtn">添加</a>
                                                <a class="btn btn-sm btn-primary" style="position: absolute;right: 10px;" id="searchBtn">查询</a>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- /.box-header -->
                                    <div class="box-body" style="margin-top: -4px">
                                        <table id="dataTable"
                                               class="table text-center table-striped table-bordered table-hover">
                                            <thead>
                                            <tr>
                                                <th>角色ID</th>
                                                <th>角色名称</th>
                                                <th>备注</th>
                                                <th>修改人</th>
                                                <th>修改时间</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody id="dataTableBody">
                                            </tbody>
                                        </table>
                                    </div>
                                    <!-- /.box-body -->
                                </div>
                            </div>
                        </div>
                    </div>
					<!-- 模态框（Modal） -->
					<div class="modal fade" id="modal" tabindex="-1" role="dialog"
						aria-labelledby="modal" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal"
										aria-hidden="true">&times;</button>
									<h6 class="modal-title" id="modalLable">客户信息：</h6>
								</div>
								<!-- form start -->
								<form id="form" class="form-horizontal" role="form"
									action="index/" method="post">
									<div class="modal-body">
										<div class="form-group" style="display: none;">
											<span class="col-sm-3 control-label">角色ID：</span> <input
												type="hidden" class="form-control" value="-1" />
											<div class="col-sm-5">
												<input type="text" class="form-control" name="roleId" id="roleId" />
												<span class="required-spot marginl-207">＊</span>
											</div>
										</div>
										<div class="form-group">
											<span class="col-sm-3 control-label" style="font-size: 12px;">登录ID：</span>
											<div class="col-sm-5" style="padding-left:0;">
												<input type="text" class="form-control " readonly="readonly" style="width: 200px; height: 24px; border-radius:5px; " name="loginId" id="loginId" />
											</div>
										</div>
										<div class="form-group">
											<span class="col-sm-3 control-label" style="font-size: 12px;">角色名称：</span>
											<div class="col-sm-5" style="padding-left:0;">
												<input type="text" class="form-control " style="width: 200px; height: 24px; border-radius:5px; " name="roleName" id="roleName" placeholder="请输入角色名称" />
												<span class="required-spot marginl-207">＊</span>
											</div>
										</div>
										<div class="form-group">
											<span class="col-sm-3 control-label" style="font-size: 12px;">备注：</span>
											<div class="col-sm-5" style="padding-left:0;">
												<textarea rows="10" cols="100" class="form-control" style="width: 200px; height: 80px; border-radius:5px;" name="remark"
													id="remark"></textarea>
											</div>
										</div>
										<div class="form-group"></div>
										<div class="form-group text-center">
											<span class="col-sm-3 control-label"></span>
											<div class="col-sm-5" style="padding-left:0;">
												<button type="button" class="btn btn-sm btn-primary submit" onclick="User.formSubmit()">保存</button>
												<button type="button" class="btn btn-sm btn-primary" data-dismiss="modal">返回</button>
											</div>
										</div>
									</div>
									<!-- /.box-body -->
								</form>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
				<!-- /.modal -->
				</div>
			</section>
			<!-- /.content -->
		</div>
	</div>
		<!-- jQuery 2.1.4 -->
		<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
		<!-- jQuery UI 1.11.4 -->
		<script src="plugins/jQueryUI/jquery-ui.min.js"></script>
		<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
		<script>
        $.widget.bridge('uibutton', $.ui.button);
    </script>
		<!-- Bootstrap 3.3.5 -->
		<script src="js/bootstrap.min.js"></script>
		<!-- Select2 -->
		<script src="plugins/select2/select2.min.js"></script>
		<!-- jstree -->
		<script src="plugins/jstree/dist/jstree.min.js"></script>
		<!-- DataTables -->
		<script src="plugins/datatables/jquery.dataTables.min.js"></script>
		<script src="plugins/datatables/dataTables.bootstrap.min.js"></script>
		<!-- AdminLTE App -->
		<script src="js/app.min.js"></script>
		<!-- AdminLTE for demo purposes -->
		<script src="js/demo.js"></script>
		<!--<script src="js/bootstrap-toggle.min.js"></script>-->
		<script src="js/mymodal.js"></script>
		<script src="plugins/jqueryform/jquery.form.js"></script>
		<script src="js/module/Global.js" type="text/javascript"></script>
		<script src="js/module/common-ajax.js" type="text/javascript"></script>
		<script src="js/module/common-datatable.js" type="text/javascript"></script>

		<script type="text/javascript">
        //定义界面操作对象
        var User = {
            table: dataTable,
            selectId:null,
            //表单提交回调
            formCallBack : {
                success : function (data) {
                    $('#modal').modal('hide');
                    User.table.reload();
                    MyModal.alert('成功!');
                },
                error : function() {
                    MyModal.alert({message:'系统发生错误!',modalClass:'modal-danger'});
                }
            }
        };
        //定义表格列渲染
        User.tableCol = function () {
            return [
                {"data": "roleId"},
                {"data": "roleName"},
                {"data": "remark"},
                {"data": "updateName"},
                {"data": "updateTime"},
                {
                    "data": "id", "mRender": function (id) {
                        return '<img src="img/icon/名单分配.png" class="btn btn-xs" onclick="User.allot(' + id + ')" width=“28px” height="20px"/> ' +
                        		'<img src="img/icon/收回.png" class="btn btn-xs" onclick="User.modify(' + id + ')" width=“28px” height="20px"/> ' +
                        		'<img src="img/icon/修改.png" class="btn btn-xs" onclick="User.update(' + id + ')" width=“28px” height="20px"/> ' +
                            '<img src="img/icon/删除.png" class="btn btn-xs" onclick="User.delete(' + id + ')" width=“28px” height="20px"/>' +
                            '<img src="img/icon/授权.png" class="btn btn-xs" onclick="User.impower(' + id + ')" width=“28px” height="20px"/>';
                    }
                }
            ];
        };
        //查询数据
        User.query = function () {
            //获取数据列定义
            const col = User.tableCol();
            //创建表格对象
            const table = new CommonTable('dataTable', 'index/findRole/', col, 'data');
            User.table = table;
            //设置服务器分页
            table.setServerSide(true);
            table.setData({"q1": $('#q1').val(),"q2": $('#q2').val()});
            //表格实例化
            table.init();
        };
        User.update = function (id) {
            new $ajax('/index/'+id,function (data) {
            	 	//查询赋值
                const form = $("#form");
                form.find('#roleId').val(data.roleId);
                form.find('#roleName').val(data.roleName);
                form.find('#remark').val(data.remark);
                $('#modal').modal();
            }).doGet().start();
        };
        User.add = function () {
            $('#modal').modal();
        };
        //界面初始化操作
        $(function () {
            //第一次初始化
            User.query();
            //查询按钮触发
            $('#searchBtn').off('click').on('click',User.query);
            //添加按钮触发
            $('#addBtn').off('click').on('click',User.add);
        });

    </script>
</body>
</html>